<template>
  <el-dialog
    v-model="visible"
    width="500"
    :close-on-click-modal="false"
    top="20vh"
    :before-close="beforeClose"
  >
    <div class="flex flex-col items-center">
      <div class="font-size-18">扫码微信登录</div>
      <div v-loading="!imgBase64" class="box">
        <img v-if="imgBase64" class="w-100% h-100%" :src="imgBase64" />
      </div>
      <div class="agreement">
        注册登录即代表同意<span class="text" @click="agreement('privacy')"
          >《商映平台隐私保护政策》</span
        ><span class="text" @click="agreement('service')">《商映平台用户服务协议》</span>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getRegisterQrcodeAPI, oauthTokenAPI } from "@/request/apis/user";
import { useUserStore } from "@/stores/modules/user";
import { POLLING_TIME } from "@/contants";

const byLink = inject("byLink");
const byLinkSetDistinctId = inject("byLinkSetDistinctId");

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  successCb: {
    type: [Function, null],
    default: null,
  },
});
const successCb = props.successCb;
const emits = defineEmits(["update:modelValue"]);
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    toggleDialog(value);
  },
});
watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue) {
      getRegisterQrcode();
      /** @name 埋点 **/
      byLink("web_login_click");
    }
  },
  {
    immediate: true,
  },
);

const toggleDialog = (bool) => emits("update:modelValue", bool);
const userStore = useUserStore();
const imgBase64 = ref("");
const scene = ref("");
const timer = ref(null);

/** @name 获取二维码 **/
function getRegisterQrcode() {
  getRegisterQrcodeAPI().then(({ data = {} }) => {
    imgBase64.value = data.imgBase64;
    scene.value = data.scene;
    imgBase64.value && startPolling();
  });
}
/** @name 开启轮询 **/
function startPolling() {
  timer.value = setInterval(() => {
    oauthToken();
  }, POLLING_TIME);
}
/** @name 清除轮询 **/
function endPolling() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
}
function oauthToken() {
  oauthTokenAPI({
    grant_type: "wechat_qrcode",
    scene: scene.value,
  })
    .then((res) => {
      // 存储Token
      userStore.COMMON_SET_DATA(res);
      // 有回调函数时，成功回调
      successCb && successCb();
      // 停止轮询与关闭dialog
      beforeClose();
      // 开启刷新Token操作
      userStore.REFRESH_TOKEN();
      /** @name 埋点-设置业务ID **/
      byLinkSetDistinctId(res.userId);
      byLink("web_login");
    })
    .catch(() => {
      console.error("等待扫码登录~~");
    });
}
/** @name 关闭 **/
function beforeClose() {
  endPolling();
  imgBase64.value = "";
  scene.value = "";
  toggleDialog(false);
  /** @description 提供给JS形式调用的回调 **/
  emits("close");
}

function agreement(type) {
  window.open(`/market/agreement/${type}/agreement-${type}.html`);
}
</script>

<style lang="scss" scoped>
.box {
  width: 258px;
  height: 258px;
  margin-bottom: 24px;
  margin-top: 24px;
  border-radius: $qf-border-radius-mid;
  overflow: hidden;
}
.agreement {
  font-size: $qf-font-size-sm;
  color: $qf-color-font3;
  margin-bottom: 12px;
}
.text {
  cursor: pointer;
  &:hover {
    color: $qf-primary3;
  }
}
</style>
